<template>
  <v-container fluid class="fill-height">
    <v-row class="fill-height">
      <!-- 左侧：用户指令和系统状态 -->
      <v-col cols="12" md="4">
        <v-card v-if="submittedPrompt" variant="tonal" class="mb-4">
          <v-card-text class="text-caption">
            {{ submittedPrompt }}
          </v-card-text>
        </v-card>

        <v-card
            v-if="currentStatus === 'thinking' || currentStatus === 'completed'"
            variant="outlined"
            class="mt-4"
        >
          <v-card-text class="d-flex align-center">
            <v-progress-circular
                v-if="currentStatus === 'thinking'"
                indeterminate
                color="primary"
                size="24"
                class="mr-3"
            ></v-progress-circular>
            <v-icon
                v-if="currentStatus === 'completed'"
                color="success"
                class="mr-3"
            >mdi-check-circle</v-icon>
            <div>
              <div class="font-weight-bold">{{ thinkingStatusTitle }}</div>
              <div class="text-caption">{{ thinkingStatusSubtitle }}</div>
            </div>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- 右侧：AI 实时回答 -->
      <v-col cols="12" md="8">
        <v-card v-if="showResult" variant="outlined" class="fill-height d-flex flex-column">
          <v-card-title class="d-flex align-center py-3">
            <v-icon class="mr-2">mdi-robot-excited-outline</v-icon>
            <span>AI 写手助手</span>
          </v-card-title>
          <v-divider></v-divider>

          <v-virtual-scroll :items="['']" class="flex-grow-1">
            <v-card-text>
              <!-- v-html 依然是关键，但现在它渲染的是由 marked 生成的 HTML -->
              <div v-html="displayedAnswer" class="answer-content"></div>
            </v-card-text>
          </v-virtual-scroll>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
                :prepend-icon="footerButtonIcon"
                :class="{'spin-animation': currentStatus === 'typing'}"
                variant="tonal"
                :color="footerButtonColor"
                readonly
            >
              {{ footerButtonText }}
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>

    <v-footer app>
      <v-text-field
          v-model="userInput"
          @keydown.enter="submitQuery"
          label="在此输入指令触发演示..."
          variant="solo"
          rounded
          hide-details
          :error="inputError"
          :error-messages="errorMessage"
          :disabled="currentStatus !== 'idle'"
      >
        <template v-slot:append-inner>
          <v-btn
              icon="mdi-send"
              variant="text"
              @click="submitQuery"
              :disabled="!userInput || currentStatus !== 'idle'"
          ></v-btn>
        </template>
      </v-text-field>
    </v-footer>
  </v-container>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
// 1. 导入 marked 库
import { marked } from 'marked';

// --- 状态控制 ---
const userInput = ref('');
const submittedPrompt = ref('');
const inputError = ref(false);
const errorMessage = ref('');
const showResult = ref(false);
const displayedAnswer = ref('');
let typingInterval = null;

const currentStatus = ref('idle'); // 'idle', 'thinking', 'typing', 'completed'
const startTime = ref(0);
const duration = ref(0);

// --- 数据区 ---
const targetPrompt = ref('现需要系统性框架做市场评估，请从PESTEL六个维度分析新能源汽车出口市场的宏观环境，每个维度需要6个子指标。政治层面要抓住政策风险点、经济指标设计时要注意层级感、环境指标要突出政策导向性、法律风险部分把数据合规放在首位。形成逻辑闭环。');

// 2. 关键改动：现在使用纯 Markdown 格式来编写内容，更易读、易维护！
const fullAnswer = ref(`
### 一、政治 (Political) ：政策导向与地缘博弈
1.  **贸易壁垒与关税波动**
    欧盟碳边境调节机制 (CBAM) 对电池等高碳组件征收额外关税，预计增加单车成本 3-5%。美国《通胀削减法案》(IRA) 对非北美组装车辆取消补贴。
2.  **政策稳定性与连续性**
    目标国大选可能导致新能源补贴政策在 2-3 年内出现重大调整，如德国提前终止电动车补贴，直接影响市场预期和销量。
3.  **地缘政治冲突**
    俄乌冲突导致欧洲能源价格上涨 40%，推高充电成本；红海危机使海运周期延长 15-20 天，增加物流成本和交付不确定性。
4.  **国际协议与联盟**
    加入 RCEP 协定可使对东盟成员国出口的整车关税降低 5-10%，但需满足 40% 的区域价值成分要求，考验供应链本地化能力。
5.  **出口国政治风险评级**
    部分南美国家政治风险评级为 B-，存在资产被国有化的低概率风险，影响长期投资决策，如建厂和充电网络布局。
6.  **政府补贴与产业扶持**
    法国提供高达 7000 欧元的购车补贴，但要求车辆生产碳足迹低于特定阈值，对中国依赖煤电的供应链构成挑战。

### 二、经济 (Economic) ：市场潜力与成本结构
1.  **目标市场 GDP 增速**
    东南亚市场 GDP 复合年增长率预计为 5%，高于欧洲的 1.5%，显示出更大的增量市场潜力，但人均 GDP 较低，适合经济型车型。
2.  **汇率波动影响**
    美元/人民币汇率每波动 1%，影响出口车辆利润约 0.5%。需采用外汇对冲工具锁定远期汇率，规避利润侵蚀风险。
3.  **新能源汽车渗透率**
    挪威渗透率超 80%，市场趋于饱和，竞争激烈；意大利渗透率仅 4%，但增长迅速，属于蓝海市场，进入壁垒较低。
4.  **产业链成熟度**
    墨西哥拥有成熟的汽车零部件供应链，但在电池、电控等核心三电系统上配套能力不足，本地化生产需从中国进口关键组件。
5.  **消费者购买力**
    欧洲市场中位家庭年收入约 4 万欧元，可支撑 3-5 万欧元的主流车型消费。印度市场中位年收入不足 5000 美元，主销车型价格需低于 1.5 万美元。
6.  **基础设施投资**
    德国计划 2025 年建成 100 万个公共充电桩，车桩比接近 10:1，有利市场发展。巴西车桩比高达 50:1，充电焦虑严重制约消费意愿。

### 四、技术 (Technological) ：创新驱动与风险对冲
1.  **核心技术自主可控性**
    中国固态电池研发进度落后日本 2 年，2024 年量产能密度仅 300Wh/kg，制约高端车型竞争力。
2.  **专利布局与技术壁垒**
    特斯拉持有全球 15% 的快充专利，中国车企需支付每辆车 500 美元授权费；欧盟拟制定电池数字护照标准，增加合规成本。
3.  **技术迭代风险**
    800V 高压平台正成为主流，现有 400V 平台车型在 2-3 年内可能面临技术代差，导致二手车残值率大幅下降 10-15%。

### 六、法律 (Legal) ：合规底线与数据主权
1.  **数据隐私法规**
    欧盟 GDPR 对车辆收集的用户数据（如行车轨迹、驾驶习惯）有严格的存储和使用规定，违规罚款可达全球年收入的 4%。
2.  **知识产权保护**
    在部分新兴市场，外观设计和车机系统 UI 的抄袭风险较高，需提前进行全球专利和商标布局，建立法律防火墙。
`);


// --- Computed Properties for dynamic UI ---
const thinkingStatusTitle = computed(() => {
  return currentStatus.value === 'thinking' ? '正在思考' : '已完成思考';
});
const thinkingStatusSubtitle = computed(() => {
  return currentStatus.value === 'thinking' ? 'AI 正在分析您的指令...' : '分析完毕，即将为您生成内容...';
});
const footerButtonText = computed(() => {
  if (currentStatus.value === 'typing') return 'AI 撰写中...';
  if (currentStatus.value === 'completed') return `AI 撰写完毕 (耗时 ${duration.value}s)`;
  return '';
});
const footerButtonIcon = computed(() => {
  if (currentStatus.value === 'typing') return 'mdi-autorenew';
  if (currentStatus.value === 'completed') return 'mdi-check-circle';
  return '';
});
const footerButtonColor = computed(() => {
  return currentStatus.value === 'completed' ? 'success' : 'grey';
});


// --- 逻辑方法 ---
const submitQuery = () => {
  if (userInput.value.trim() === targetPrompt.value.trim()) {
    inputError.value = false;
    errorMessage.value = '';
    submittedPrompt.value = userInput.value;
    userInput.value = '';
    startSimulation();
  } else {
    inputError.value = true;
    errorMessage.value = '请输入指定的指令才能触发演示。请复制粘贴完整指令。';
  }
};

const startSimulation = () => {
  currentStatus.value = 'thinking';
  showResult.value = false;
  displayedAnswer.value = '';
  if (typingInterval) clearInterval(typingInterval);
  startTime.value = Date.now();

  setTimeout(() => {
    currentStatus.value = 'typing';
    showResult.value = true;
    startTypingEffect();
  }, 3000);
};

const startTypingEffect = () => {
  // 3. 关键改动：在这里，我们将完整的 Markdown 文本一次性转换为 HTML
  const fullHtmlAnswer = marked.parse(fullAnswer.value.trim());

  let index = 0;
  // 然后对生成的 HTML 字符串执行打字效果
  const textToType = fullHtmlAnswer;
  const totalDuration = 8000;
  const typingSpeed = totalDuration / textToType.length;

  typingInterval = setInterval(() => {
    if (index < textToType.length) {
      index++;
      displayedAnswer.value = textToType.slice(0, index);
    } else {
      clearInterval(typingInterval);
      displayedAnswer.value = textToType;
      currentStatus.value = 'completed';
      const endTime = Date.now();
      duration.value = ((endTime - startTime.value) / 1000).toFixed(1);
    }
  }, typingSpeed);
};

watch(userInput, () => {
  if(inputError.value) {
    inputError.value = false;
    errorMessage.value = '';
  }
});
</script>

<style scoped>
.fill-height {
  height: calc(100vh - 64px - 16px);
}
.spin-animation .v-icon {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/*
  样式部分无需更改！
  marked 库会将 Markdown 转换为与我们之前手写的 HTML 结构几乎完全相同的代码。
  例如：
  - `### Title` -> `<h3>Title</h3>` (我们的 h4 样式会应用上去)
  - `1. **Title**\n   Text` -> `<ol><li><strong>Title</strong><p>Text</p></li></ol>`
  所以之前精心编写的 CSS 样式可以完美复用。
*/
.answer-content :deep(h3) { /* marked 默认生成 h3，我们适配一下 */
  font-size: 1.2rem;
  font-weight: 600;
  color: #202124;
  margin-top: 28px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.answer-content :deep(ol) {
  list-style-type: none;
  counter-reset: item;
  padding-left: 0;
}

.answer-content :deep(li) {
  counter-increment: item;
  margin-bottom: 24px;
  position: relative;
  padding-left: 32px;
}

.answer-content :deep(li::before) {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 1px;
  font-weight: bold;
  font-size: 1rem;
  color: #1a73e8;
}

.answer-content :deep(li strong) {
  font-size: 1rem;
  font-weight: 600;
  color: #202124;
  display: block;
}

.answer-content :deep(li p) {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #5f6368;
  line-height: 1.7;
}
</style>